<template>
  <el-container style="height: 100vh;">
    <!-- 左侧菜单栏 -->
    <el-aside width="200px" style="background-color: #304156;">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <!-- 主页 -->
        <el-menu-item index="/tpa/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">主页</span>
        </el-menu-item>

        <!-- TPA 问答菜单栏 -->
        <el-submenu index="tpa">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>TPA 问答</span>
          </template>
          <el-menu-item index="/tpa/data-entry">
            <i class="el-icon-edit"></i>
            <span slot="title">数据录入</span>
          </el-menu-item>
          <el-menu-item index="/tpa/data-view">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">数据展示</span>
          </el-menu-item>
          <!-- <el-menu-item index="/tpa/data-list">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">数据编辑</span>
          </el-menu-item> -->
          <el-menu-item index="/tpa/data-export">
            <i class="el-icon-download"></i>
            <span slot="title">数据导出</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/ds/deepseekSearch">
          <i class="el-icon-s-home"></i>
          <span slot="title">ds搜索</span>
        </el-menu-item>
        <!-- 登录/退出 -->
        <el-menu-item v-if="!isLoggedIn" index="/login">
          <i class="el-icon-user"></i>
          <span slot="title">登录</span>
        </el-menu-item>
        <el-menu-item v-else @click="confirmLogout">
          <i class="el-icon-switch-button"></i>
          <span slot="title">退出</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: this.$route.path, // 初始化为当前路由路径
    };
  },
  computed: {
    isLoggedIn() {
      return !!localStorage.getItem('token'); // 判断用户是否已登录
    },
  },
  watch: {
    // 监听路由变化，更新菜单选中状态
    $route(to) {
      this.activeMenu = to.path;
    },
  },
  methods: {
    // 确认退出
    confirmLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.logout(); // 用户点击确定，执行退出操作
        })
        .catch(() => {
          // 用户点击取消，不执行任何操作
        });
    },
    // 退出登录
    logout() {
      localStorage.removeItem('token'); // 清除 Token
      this.$router.push('/login'); // 跳转到登录页
      this.$message({
        type: 'success',
        message: '退出成功！',
      });
    },
  },
};
</script>

<style scoped>
.el-aside {
  background-color: #304156;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
  margin: 10px 0;
}

.el-menu-item:hover {
  background-color: #263445 !important;
}

.el-submenu .el-menu-item {
  padding-left: 50px !important; /* 子菜单项缩进 */
}

.el-main {
  padding: 20px;
  background-color: #f0f2f5;
}
</style>